<template>
    <div class="video-wall">
        <div class="wall1" v-for="video in videos" :key="video.vid">
            <div class="video video1">
                <video controls autoplay="autoplay" loop muted>
                    <source :src="'http://'+video.surveillanceIp" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
            <div style="display: flex;justify-content:space-between">
                <span style="line-height: 50px;margin-left: 10px">{{video.position}}</span>
                <span style="line-height: 50px; margin-right: 10px">{{video.status}}</span>
            </div>
        </div>
        <div class="wall1">
            <div class="video"></div>
            <div style="display: flex;justify-content:space-between">
                <span style="line-height: 50px;margin-left: 10px">教学楼一号楼</span>
                <span style="line-height: 50px; margin-right: 10px">离线</span>
            </div>
        </div>
        <div class="wall1">
            <div class="video"></div>
            <div style="display: flex;justify-content:space-between">
                <span style="line-height: 50px;margin-left: 10px">实验楼</span>
                <span style="line-height: 50px; margin-right: 10px">在线</span>
            </div>
        </div>
        <div class="wall1">
            <div class="video"></div>
            <div style="display: flex;justify-content:space-between">
                <span style="line-height: 50px;margin-left: 10px">饭堂</span>
                <span style="line-height: 50px; margin-right: 10px">在线</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "VideoWall",
        data(){
            return {
                videos:[{
                    vid: '',
                    position:'',
                    status: '',
                    surveillanceIp: ''
                }],
            }
        },
        methods: {
            getVideoWall(){
                this.$Http.videoWall(this.scId).then(res=>{
                    this.videos = res.data.data.map(item=>{
                        return {
                            vid: item.vid,
                            position: item.position,
                            status: item.status === 1 ? "在线":"离线",
                            surveillanceIp: item.surveillanceIp
                        }
                    })
                    console.log(res)
                })
            },
            handleClick (row) {
                console.log(row);
            },
        },
        mounted() {
            this.getVideoWall()
        },
        computed: {
            scId() {
                return this.$store.state.scId;
            },
        },
        watch: {
            scId: {
                handler() {
                    this.getVideoWall()
                },
                immediate: true,
                deep: true,
            },
        },
    }
</script>

<style scoped lang="scss">
    @import '../../../public/style.scss';
.video-wall{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    color: $normalColor;
    font-size: 14px;
    > div{
       height: 350px;
        background: aqua;
    }
}
    .video{
        height: 85%;
        background: #E9EEF3;
    }
    .video1{
        video{
            width: 100%;
            height: 100%;
            object-fit: fill  // 重点
        }
    }
</style>